<template>
	<view class="page">
		<view class="noticeDetail">
			<text class="systemNotice">系统通知 12月28日</text>
			<view class="free-experience">
				<text>【免费体验】 VIP新人特权——简历助手</text>
			</view>
			<view class="automatic">
				<text>自动标注求职者在线简历中的异常时间点；为您提供求职者过往工作经历中公司的补充信息，帮助您全面了解求职者。</text>
			</view>
			<view class="line"></view>
			<view class="view-details flex-between flex-align">
				<u-button text="查看详情"></u-button>
				<u-icon name="arrow-right" color="##1872FF" size="15" bold></u-icon>
			</view>
		</view>
		<view class="noticeDetail">
			<text class="systemNotice">系统通知 12月28日</text>
			<view class="free-experience">
				<text>免费体验卡</text>
			</view>
			<view class="automatic">
				<text>亲爱的HR，职聊为您送上免费体验卡一张，有效期8天。该体验卡无需领取，在您当前体验卡到期后自动生效。</text>
			</view>
			<view class="line"></view>
			<view class="view-details flex-between flex-align">
				<u-button text="了解我的权益"></u-button>
				<u-icon name="arrow-right" color="##1872FF" size="15" bold></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="less">
	.page {
		padding: 16rpx 14rpx 0rpx 16rpx;
		font-weight: 400;
		display: flex;
		flex-direction: column;
		row-gap: 16rpx;
	}


	.noticeDetail {
		// width: 100%;
		height: 246rpx;
		background-color: #FEFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 8rpx 20rpx;
	}

	.systemNotice {
		font-size: 20rpx;
		color: #6D6D6D;
		line-height: 28rpx;
		text-align: left;
		margin-bottom: 16rpx;
		display: block;
	}

	.free-experience {
		font-size: 28rpx;
		color: #3D3D3D;
		line-height: 40rpx;
		text-align: left;
	}

	.automatic {
		font-size: 24rpx;
		color: #6D6D6D;
		line-height: 34rpx;
		text-align: left;
	}

	.line {
		margin: 32rpx 0rpx 16rpx 0rpx;
		width: 680rpx;
		height: 0rpx;
		border: 2rpx solid #D8D8D8;
	}

	.view-details {
		column-gap: 32rpx;

		.u-button {
			height: 34rpx;
			font-size: 24rpx;
			color: #1872FF;
			line-height: 34rpx;
			border: none;
			padding: 0;
			justify-content: flex-start;

			&::after,
			&::before {
				content: none;
			}
		}
	}
</style>